{% extends 'base.html' %}

{% block head %}
<title>首页-在线不聊天</title>
{% endblock %}

{% block content %}
<div class="simpleui-box">
    <div class="simpleui-row simpleui-color-gray-6f">
        <span>当前分类: </span>
        {% if sort %}
        <span class="simpleui-color-black">{{ sort.name }} <a href="/" class="simpleui-a-hover">x</a></span>
        {% endif %}
        <div style="float: right">
            <a href="/" class="simpleui-a-hover simpleui-color-gray-6f"><span>最新</span></a>
            <span>&nbsp;|&nbsp;</span>
            <a href="/hot" class="simpleui-a-hover simpleui-color-gray-6f"><span>热门</span></a>
        </div>
    </div>

    {% for site in sites.items %}
    <div class="simpleui-article-item">
        <div class="simpleui-article-item-title">
            <a href="{{ site.url }}" title="{{ site.url }}" TARGET="_blank">{{ site.name }}</a>
        </div>
        <div class="simpleui-article-item-content simpleui-color-gray-6f">
            {{ site.remark }}
        </div>
        <div class="simpleui-article-item-attr simpleui-color-gray-6f">
            <a href="/?sort={{ site.sort.id }}" class="simpleui-a-hover simpleui-color-gray-6f">
                <span>{{ site.sort.name }}</span> </a> |
            <a href="#" class="order" data-order="/api/websites/{{ site.id }}/order"><span>👍</span></a><span>&nbsp{{ site.order }}</span>
        </div>
    </div>
    {% endfor %}

    <div class="simpleui-row  simpleui-color-gray-6f">
        {% if sites.has_prev %}
            <a href="/?page={{ sites.prev_num }}" class="simpleui-a-hover simpleui-color-gray-6f"><span>上一页</span></a>
            <span>&nbsp;&nbsp;</span>
        {% endif %}
        {% for page in range(1, sites.pages+1)  %}
            {% if page == sites.page %}
            <a href="#" class="simpleui-a-underline simpleui-color-gray-6f"><span>{{ page }}</span></a>
            {% else %}
            <a href="/?page={{ page }}" class="simpleui-a-hover simpleui-color-gray-6f"><span>{{ page }}</span></a>
            {% endif%}
            <span>&nbsp;&nbsp;</span>
        {% endfor %}
        {% if sites.has_next %}
            <a href="/?page={{ sites.next_num }}" class="simpleui-a-hover simpleui-color-gray-6f"><span>下一页</span></a>
        {% endif %}

    </div>
</div>

<div class="simpleui-box">
    <div class="simpleui-row simpleui-row-title">
        全部分类
    </div>
    <div class="simpleui-row" id="allSort">

    </div>
</div>
{% endblock %}

{% block script %}
<script>
    $(function () {
        $.getJSON($SCRIPT_ROOT + '/api/sorts', function (data) {
            if (data.code == 2000) {
                let sorts = data.data;
                for(let i =0; i < sorts.length; i++){
                    let sort_dom = `<a href="/?sort=${sorts[i].id}" class="simpleui-a-hover simpleui-color-gray-6f">
                                <span>${sorts[i].name}</span> </a>`;
                    $("#allSort").append(sort_dom);
                }
            }
        });

        $(".order").on('click', function (e) {
            $.ajax({
                type: 'PUT',
                url: e.currentTarget.dataset.order,
                success: function (d) {
                    if (d.code == 2000) {
                        location.reload()
                    } else {
                        alert(d.msg)
                    }
                }
            });
        });


    });
</script>
{% endblock %}